import QtQuick 2.5
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
//import Material 0.1 as Material
//import QtQuick.Controls.Styles.Material 0.1 as MaterialStyle

// draws two arcs (portion of a circle)
// fills the circle with a lighter secondary color
// when pressed

Rectangle {
    id:root;
       color: "white";
       visible: true;
       width: 600;
       height: 600;
    Canvas {
        id: canvas

        width: 400
        height: 400
        antialiasing: true

        property color primaryColor: "orange"
        property color secondaryColor: "lightblue"

        property real centerWidth: width / 2
        property real centerHeight: height / 2
        //property real radius: Math.min(canvas.width, canvas.height) / 2
        property real radius: Math.min(canvas.width-10, canvas.height-10) / 2

        property real minimumValue: 0
        property real maximumValue: 100
        property real currentValue: 0

        property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Math.PI

        property real angleOffset: -Math.PI / 2

        signal clicked()

        onPrimaryColorChanged: requestPaint()
        onSecondaryColorChanged: requestPaint()
        onMinimumValueChanged: requestPaint()
        onMaximumValueChanged: requestPaint()
        onCurrentValueChanged: requestPaint()

        onPaint: {
            var ctx = getContext("2d");
            ctx.save();

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // fills the mouse area when pressed
            // the fill color is a lighter version of the
            // secondary color

            if (mouseArea.pressed) {
                ctx.beginPath();
                ctx.lineWidth = 90;
                ctx.fillStyle = Qt.lighter(canvas.secondaryColor, 1.25);
                ctx.arc(canvas.centerWidth,
                        canvas.centerHeight,
                        180,
                        0,
                        2*Math.PI);
                ctx.fill();

                timer.running = true;
            }

            // First, thinner arc
            // From angle to 2*PI

            ctx.beginPath();
            ctx.lineWidth = 180;
            ctx.strokeStyle = primaryColor;
            ctx.arc(canvas.centerWidth,
                    canvas.centerHeight,
                    90,
                    angleOffset + canvas.angle,
                    angleOffset + 2*Math.PI);
            ctx.stroke();

            //绘制进度条
            ctx.beginPath();
            ctx.lineWidth = 90;
            ctx.strokeStyle = canvas.secondaryColor;
            ctx.arc(canvas.centerWidth,
                    canvas.centerHeight,
                    145,
                    canvas.angleOffset,
                    canvas.angleOffset + canvas.angle);
            ctx.stroke();            
            ctx.restore();
        }

        MouseArea {
            id: mouseArea

            anchors.fill: parent
            onClicked: canvas.clicked()
            onPressedChanged: canvas.requestPaint()
        }


        Timer{
            id: timer
            interval: 100;
            running: false;
            repeat: true;
            onTriggered: {
                if(canvas.currentValue === 100) {
                    canvas.currentValue = 0;
                }
                canvas.currentValue += 1;
            }
        }
    }
}
